<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org"
                xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <meta charset="UTF-8">
    <title>待审批事项</title>


    <!-- JS -->
    <script type="text/javascript" th:src="@{/myconfig/bootstrap/js/jquery.js}" src="myconfig/bootstrap/js/jquery.js"></script>
    <script type="text/javascript" th:src="@{/myconfig/bootstrap/js/bootstrap.min.js}" src="myconfig/bootstrap/js/bootstrap.min.js"></script>
    <script type="text/javascript" th:src="@{/myconfig/layui/layui.js}" src="myconfig/layui/layui.js"></script>



    <!-- CSS -->
    <link th:href="@{/myconfig/bootstrap/css/bootstrap.min.css}" href="myconfig/bootstrap/css/bootstrap.min.css" type="text/css" rel="stylesheet" media="all">
    <link th:href="@{/myconfig/layui/css/layui.css}" href="myconfig/layui/css/layui.css" type="text/css" rel="stylesheet" media="all">
</head>
<body>

<!-- 事项专报 详情 和 审批 -->
<div class="modal fade" id="ForItemsApprovalModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg" >
        <div class="modal-content">
            <div class="modal-header">
                <h3 class="modal-title" id="forItemApproval">
                    事项审批
                </h3>
            </div>
            <div class="modal-body">
                <form id="ForItemsApprovalForm">
                    <!-- 事项ID -->
                    <input type="text" id="ForItemsApprovalItemId" style="display:none;">
                    <div style="height: 100%;width: 100%">
                        <div>
                            事项标题：
                            <input class="form-control" type="text" id="ForItemsApprovalTitle" readonly="readonly">
                        </div>
                        <div style="width:100%;height: 20%;">
                            <div style="width:30%;height:90%;float:left;">
                                事项类型：
                                <select class="form-control" id="ForItemsApprovalType" readonly="readonly"></select>
                            </div>
                            <div style="width:30%;height:90%;float:left;margin-left:5%">
                                紧急程度：
                                <select class="form-control" id="ForItemsApprovalUrgency" readonly="readonly"></select>
                            </div>
                            <div style="width:30%;height:90%;float: left;margin-left:5%">
                                地区：
                                <select class="form-control" id="ForItemsApprovalArea" readonly="readonly"></select>
                            </div>
                        </div>
                        <div style="width: 100%;height:12%;">
                            事项内容：
                            <textarea id="ForItemsApprovalContent" class="form-control" rows="7%" cols="100%" readonly="readonly"></textarea>
                        </div>
                        <div style="width: 100%;height:10%;">
                            备注：
                            <textarea id="ForItemsApprovalRemark" class="form-control" rows="3%" cols="100%" readonly="readonly"></textarea>
                        </div>
                        <div style="width: 100%;height:10%;">
                            审批备注：
                            <textarea id="ForItemsApprovalResultRemark" class="form-control" rows="2%" cols="100%"></textarea>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                审批结果:
                <select id="ForItemsApprovalResult" class="form-control" style="width:35%;height: 4%"></select>
                <button type="button" class="btn btn-default" onclick="closeForItemsApprovalModal()">关闭</button>
                <button type="button" class="btn btn-primary" onclick="ForItemsApprovalCommit()">提交审批结果</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>






<!-- 数据表格 -->
<table class="layui-hide" id="forListAwaitingApprovalItems" lay-filter="forItems"></table>

<!-- 表格 格式 紧急状况 -->
<script type="text/html" id="urgencyColor">
    {{#  if(d.urgency === '正常'){ }}
    <span><i class="layui-badge-dot layui-bg-green"></i>{{ d.urgency }}</span>
    {{#  } else { }}
    <span><i class="layui-badge-dot layui-bg-red"></i>{{ d.urgency }}</span>
    {{#  } }}
</script>
<!-- 表格 格式 审批状态-->
<script type="text/html" id="stateColor">
    {{#  if(d.state === '审批通过'){ }}
    <span><i class="layui-badge-dot layui-bg-green"></i>{{ d.state }}</span>
    {{#  } else if(d.state === '审批驳回') { }}
    <span><i class="layui-badge-dot layui-bg-red"></i>{{ d.state }}</span>
    {{#  } else{ }}
    <span><i class="layui-badge-dot layui-bg-orange"></i>{{ d.state }}</span>
    {{#  } }}
</script>


<!-- 表格 操作按钮 -->

<script type="text/html" id="ReportApproval">
    <a class="layui-btn layui-btn-radius layui-btn-xs layui-btn-normal" lay-event="approvalItems">查看并审批</a>
</script>


<script th:inline="none">
    layui.use("table",function () {
        var table = layui.table;
        $.ajax({
            url: "itemsManage/listAwaitingApprovalItems",
            type: "post",
            success: function (result) {
                var data = result.data;
                table.render({
                    id: 'forItems',
                    elem: "#forListAwaitingApprovalItems",
                    title: "待审批专报",
                    page: true,
                    limits: [5, 10, 15, 20],
                    limit: 10,
                    group: 5,
                    height: 520,
                    data: data,
                    cols: [[
                        {field: 'sxId', title: 'ID', sort: true, width: '5%', align: 'center'}
                        , {field: 'founder', title: '立项人', width: '10%', align: 'center'}
                        , {field: 'time', title: '立项时间', sort: true, width: '10%', align: 'center'}
                        , {field: 'area', title: '地区', width: '10%', align: 'center'}
                        , {field: 'name', title: '事项标题', width: '10%', align: 'center'}
                        , {field: 'content', title: '事项内容', width: '15%', align: 'center'}
                        , {field: 'state', title: '事项状态', width: '10%', align: 'center', sort: true,templet:'#stateColor'}
                        , {field: 'urgency', title: '紧急程度', width: '10%', align: 'center', sort: true,templet:'#urgencyColor'}
                        , {field: 'remark', title: '备注', width: '10%', align: 'center'}
                        ,{title: '操作', width: '10%', align: 'center', toolbar: '#ReportApproval'}
                    ]]
                });
            }
        });

        //监听行工具事件
        table.on('tool(forItems)', function (obj) {
            var data = obj.data.sxId;
            var itemId = JSON.stringify(data);
            openApprovalItemModal(itemId);
        });
    })
</script>


<!-- 事项专报审批 -->
<script th:inline="none">
    /* 关闭 模态框 并 清空数据*/
    function closeForItemsApprovalModal() {
        /* 清空数据 */
        document.getElementById("ForItemsApprovalForm").reset();
        /* 关闭模态框 */
        $("#ForItemsApprovalModal").modal("hide");
    }

    /* 打开 模态框 并 执行相关查询 */
    function openApprovalItemModal(itemId) {
        /* 打开模态框 */
        $("#ForItemsApprovalModal").modal("show");
        /* 查询某一个事项 */
        searchReportItemById(itemId);
        /* 查询所有 审批结果 */
        searchApproveResult();
    }
    /* 查询需要审批事项的详情 */
    function searchReportItemById(itemId) {
        $.ajax({
            url: "itemsManage/searchItemById",
            type: "post",
            data: {
                "ItemId": itemId
            },
            success: function (result) {
                $("#ForItemsApprovalTitle").val(result.name);
                $("#ForItemsApprovalContent").html(result.content);
                $("#ForItemsApprovalRemark").html(result.remark);
                $("#ForItemsApprovalItemId").val(result.sxId);
                $("#ForItemsApprovalArea").html("<option>"+result.area+"</option>");
                $("#ForItemsApprovalType").html("<option>"+result.type+"</option>");
                $("#ForItemsApprovalUrgency").html("<option>"+result.urgency+"</option>");
            },
        });
    }
    /* 查询所有的审批结果 */
    function searchApproveResult() {
        $.ajax({
            url:"ItemStatusManage/searchAllResult",
            type:"post",
            success:function (result) {
                var content = "<option value=''>--请选择审批结果--</option>";
                for (var i = 0; i < result.length; i++) {
                    if(result[i].statusName == "等待审批"){
                        continue;
                    }/*else if (result[i].statusName == "等待上级审批") {
                        content += "<shiro:hasRole name=''><option value='"+result[i].checkStatusId+"'>"+result[i].statusName+"</option></shiro:hasRole>";
                    }*/else {
                        content += "<option value='"+result[i].checkStatusId+"'>"+result[i].statusName+"</option>";
                    }
                }
                $("#ForItemsApprovalResult").html(content);
            }
        });
    }
    /* 事项专报审批 */
    function ForItemsApprovalCommit() {
        var approveItemId = $("#ForItemsApprovalItemId").val();
        var approveItemResult = $("#ForItemsApprovalResult").val();
        var approveItemRemark = $("#ForItemsApprovalRemark").val();
        if(approveItemRemark == ""){
            approveItemRemark = "无！";
        }
        if(approveItemResult == ""){
            layer.msg("请选择一个审批结果！");
        }else {
            $.ajax({
                url:"ItemApproveManage/ItemApproveCommit",
                type:"post",
                data:{
                    "itemId":approveItemId,
                    "approvalResult":approveItemResult,
                    "approvalRemark":approveItemRemark
                },
                success:function (result) {
                    if(result == "success"){
                        layer.msg("审批结果提交成功！",{
                            time:500,
                            end:function () {
                                closeForItemsApprovalModal();
                                location.reload();
                            }
                        });
                    }else {
                        layer.msg("审批结果提交失败！")
                    }
                }
            });
        }
    }
</script>

</body>
</html>